<template>
	<div id="order_container">
		<div style="height: 30px;display:flex;align-items: center;">
			<span style="height: 30px;line-height: 30px;font-size: 20px;">待支付订单</span>
		</div>
		<div id="cart_content">
			<el-table :data="orderitem" border style="width: 100%" height="auto">
				</el-table-column>
				<el-table-column fixed prop="imageUrl" label="商品图片" min-width="3%">
					<template slot-scope="scope" v-if="scope.row.imageUrl">
						<!-- <el-button size="mini" @click="findimage(scope.row)">查看</el-button> -->
						<el-image style="width: 100px; height: 50px"
							:src="require('@/assets/equipments/'+scope.row.imageUrl)"
							:preview-src-list="[require('@/assets/equipments/'+scope.row.imageUrl)]" />
					</template>
				</el-table-column>
				<el-table-column fixed prop="name" label="商品信息" min-width="6%">
					<template slot-scope="scope">
						<div class="blue-font-color">{{ scope.row.name}}</div>
					</template>
				</el-table-column>
				<el-table-column prop="realPrice" label="现价" :formatter="rounding" min-width="4%">
				</el-table-column>
				<el-table-column prop="price" label="原价" :formatter="rounding" min-width="4%">
				</el-table-column>
				<el-table-column label="数量" align="center" prop="count" min-width="3%">
				</el-table-column>
				<el-table-column label="小计" prop="subtotal" align="center" min-width="4%">
					<template slot-scope="money">
						<span>￥{{(money.row.price*money.row.count).toFixed(2)}}</span>
					</template>
				</el-table-column>
			</el-table>
			<div id="order_num_totalPrice">
				<div class="cart_num" style="margin-left: 32%;">总共<span
						class="total-num">{{this.orderitem.length}}</span>种商品</div>
				<div class="cart_total_price" style="margin-right: 32%;">总价：<span
						class="total-price">￥{{cartTotalPrice}}</span></div>
			</div>
		</div>
		<div id="order_formLabelAlign">
			<el-form label-position="left" label-width="80px" :model="orderInfo">
				<el-form-item label="收件人">
					<el-input v-model="orderInfo.orderName"></el-input>
				</el-form-item>
				<el-form-item label="联系方式">
					<el-input v-model="orderInfo.phone"></el-input>
				</el-form-item>
				<el-form-item label="收货地址">
					<el-input v-model="orderInfo.address"></el-input>
				</el-form-item>
			</el-form>

			<div id="pay_button">
				<el-button type="danger" style="margin-top: 10px;margin-right: 30px;margin-left: 100px;"
					@click="toPay()">立即支付</el-button></el-button>
			</div>
			<div style="height: 20px;">
			</div>
		</div>

	</div>
</template>

<script>
	import request from '../../../utils/axios/request'
	export default {
		data() {
			return {
				orderitem: [{

				}],
				tableData: [{
					id: '21',
					imageUrl: 'test.png',
					name: 'fsdf',
					realPrice: '22',
					price: '33',
					count: '2',
					goodsPrice: '55'
				}],
				orderInfo: {
					orderName: '',
					phone: '',
					address: '',
					userId: '',
					amount: '',
					orderDetails: []


				}
			}
		},
		computed: {
			cartTotalPrice() {
				let sum = 0
				this.orderitem.forEach(item => {
					sum += item.realPrice * item.count
				})
				// 因为要保留小数点后面两位，所以要toFixed(2)
				return sum.toFixed(2)
			}

		},
		mounted() {
			request({
				method: 'get',
				url: '/userInfo/uId/' + 123
			}).then((res) => {
				// console.log(res)
				this.orderInfo.orderName = res.data.data[0].userName
				this.orderInfo.phone = res.data.data[0].userPhone
				this.orderInfo.address = res.data.data[0].userLocation
				this.orderInfo.userId = 123
				this.orderInfo.amount = this.cartTotalPrice
			})
		},
		created() {
			// console.log(this.$route.query)
			// this.tableData = this.$route.query.data
			// console.log(this.orderitem)
			console.log('this.$route.query.data')
			console.log(this.$route.query.data)
			console.log('this.$route.query.data')
			this.$route.query.data.forEach(item => {
				this.$set(item, 'userId', 123) //此处从token出获得userId替换'123'	
			})
			var jsonObj = JSON.parse(JSON.stringify(this.$route.query.data));
			console.log(jsonObj)
			for (var i = 0; i < jsonObj.length; i++) {
				jsonObj[i].id = jsonObj[i].userCartDetailsId;
				jsonObj[i].realPrice = jsonObj[i].eRealprice;
				jsonObj[i].price = jsonObj[i].ePrice;
				jsonObj[i].count = jsonObj[i].eCount;
				jsonObj[i].name = jsonObj[i].name
				jsonObj[i].imageUrl = jsonObj[i].imageUrl
				jsonObj[i].userId = jsonObj[i].userId
			}
			this.orderitem = jsonObj
			console.log('this.orderitem')
			console.log(this.orderitem)

		},
		methods: {
			toPay() {
				window.open(
					`http://localhost:8888/alipay/pay?subject=${this.orderInfo.phone}&traceNo=${this.orderInfo.userId}&totalAmount=${this.orderInfo.amount}`
					)
				console.log('this.orderInfo')
				console.log(this.orderInfo)
				console.log('this.orderInfo')
				this.orderInfo.orderDetails = this.orderitem
				request({
					method: 'post',
					url: '/orders/add',
					data: {
						data: this.orderInfo
					}
				}).then((res) => {
					console.log(res)
					if (res.data.code = 100) {
						this.$router.push("paySuccess")
					}
				})
			},
			//保留两位小数
			rounding(row, column) {
				return parseFloat(row[column.property]).toFixed(2)
			},

		}
	}
</script>

<style>
	.cart_num {
		height: 46px;
		margin-left: 38%;
		font-size: 24px;
		background-color: transparent;
		line-height: 46px;
	}

	.cart_total_price {
		height: 46px;
		color: red;
		font-size: 24px;
		background-color: transparent;
		line-height: 46px;
	}

	#order_container {
		width: 100%;
		height: auto;
		background-color: #ffffff;
	}

	#order_formLabelAlign {
		width: 100%;
		margin-top: 5px;

		background-color: #ffffff;

	}

	#order_num_totalPrice {
		width: 100%;
		height: 46px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		background-color: #ffffff;
	}

	#pay_button {
		width: 100%;
		height: 46px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		background-color: #ffffff;
	}
</style>